<template>
  <div class="wrapper homepage" :class="theme" id="meun" @click="globalClick">
    <!-- 页面头部部分 -->
    <div class="header">
      <div class="h_title_logo">
        <div class="logo">
          <img src="@/assets/img/homeCommon/logo.png" alt="" />
        </div>
        <div class="title">智慧工地(V2.0)</div>
      </div>
      <!-- 水平一级菜单 -->
      <div class="menu">
        <el-menu
          mode="horizontal"
          text-color="#fff"
          active-text-color="#286ED2"
          :default-active="toIndex"
          @select="handleSelect"
        >
          <!-- <el-menu-item v-for="(item, index) in itemList" :index="item.path" :key="index">
            <span slot="title">{{ item.title }}</span>
          </el-menu-item> -->

          <el-menu-item
            v-for="(item, index) in tabSelectLeft"
            :index="item.link"
            :key="index"
          >
            <img
              class="linkImg"
              :src="item.link == activeId ? item.selected : item.normal"
            />
            <span slot="title">{{ item.text }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="headBody_right">
        <el-button class="head_text" type="text" icon="el-icon-s-home"
          >APP</el-button
        >

        <el-button
          class="head_text"
          type="text"
          icon="el-icon-rank"
          @click="screen"
          >全屏</el-button
        >
        <div class="userInfo" @click.stop="userDetail">
          <div class="iconsv">
            <img
              class="iconimg"
              :src="userInfo.gender == 0 ? girls : boys"
              alt=""
            />
          </div>
          <div class="name">{{ userInfo.realName }}</div>
        </div>
        <div class="isUser" v-if="isUser" ref="dialogBox" @click.prevent>
          <div class="personalCenter">个人中心</div>
          <div class="theme">
            <div style="margin-right: 0.05rem">浅色模式</div>

            <el-switch
              @change="setTheme"
              v-model="globalTheme"
              active-color="rgba(18, 81, 255, 1)"
              inactive-color="#eee"
            >
            </el-switch>
          </div>
          <div class="goLogin" @click="back()">退出登录</div>
          <div class="arrow"></div>
        </div>
      </div>
    </div>

    <!-- 页面左侧二级菜单栏，和主体内容区域部分 -->
    <el-main
      :style="{ backgroundColor: 'var(--background-color)' }"
      style="height: calc(100% - 50px)"
    >
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import bus from "@/utils/bus";
export default {
  data() {
    return {
      activeId: "/HomePage",
      isCollapse: true,
      // 是否全屏
      fullscreen: false,
      userInfo: {},
      boys: require("@/assets/img/organization/boys.png"),
      girls: require("@/assets/img/organization/girls.png"),
      isUser: false, //用户信息是否显示
      // isDarkMode: false,
      theme: "theme-light", // 默认主题
      tabSelectLeft: [],
      globalTheme: true,
    };
  },
  watch: {
    $route: {
      handler(val) {
        console.log("==", val, this.$route.path);
        console.log(123, sessionStorage.getItem("yjSmart-keyPath"));
        // if(val.path.includes('materiaMange')){
        //   console.log(4554);
        // }
        sessionStorage.removeItem("yjSmart-keyPath");
        if (val.path.includes("/HomePage")) {
          this.activeId = "/HomePage"; // 当前活动路由
        } else if (val.path.includes("/materialQualityPage")) {
          this.activeId = "/materialQualityPage"; // 当前活动路由
        } else if (val.path.includes("/stationProductionPage")) {
          this.activeId = "/stationProductionPage"; // 当前活动路由
        } else if (val.path.includes("/siteQualityPage")) {
          this.activeId = "/siteQualityPage"; // 当前活动路由
        } else if (val.path.includes("/PhysicalQualityPage")) {
          this.activeId = "/PhysicalQualityPage"; // 当前活动路由
        } else if (val.path.includes("/systemSetPage")) {
          this.activeId = "/systemSetPage"; // 当前活动路由
        }

        // console.log(val, this.activeId);
      },

      // 深度观察监听

      deep: true,
    },
  },
  computed: {
    toIndex() {
      // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
      return "/" + this.$route.path.split("/")[1];
    },
  },
  created() {
    this.globalTheme = JSON.parse(localStorage.getItem("global_theme")) || true;
    // bus.$emit("global_theme", this.globalTheme); // 将 globalTheme 的值传给父组件
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("yjSmart-userInfo"));
    if (this.userInfo.userId == "System") {
      this.tabSelectLeft = [
        {
          show: true,
          text: "数据综合统计",
          link: "/HomePage",
          normal: require("@/assets/img/homeCommon/01.png"),
          selected: require("@/assets/img/homeCommon/1.png"),
        },
        {
          show: false,
          text: "材料质量管控",
          link: "/materialQualityPage",
          normal: require("@/assets/img/homeCommon/02.png"),
          selected: require("@/assets/img/homeCommon/2.png"),
        },
        {
          show: false,
          text: "场站生产质量",
          link: "/stationProductionPage",
          normal: require("../../assets/img/homeCommon/03.png"),
          selected: require("../../assets/img/homeCommon/3.png"),
        },
        {
          show: false,
          text: "实体质量管控",
          link: "/PhysicalQualityPage",
          normal: require("../../assets/img/homeCommon/05.png"),
          selected: require("../../assets/img/homeCommon/5.png"),
        },
        {
          show: false,
          text: "路面施工管控",
          link: "/RoadConstructionPage",
          normal: require("../../assets/img/homeCommon/06.png"),
          selected: require("../../assets/img/homeCommon/6.png"),
        },
        {
          show: false,
          text: "现场质量管控",
          link: "/siteQualityPage",
          normal: require("../../assets/img/homeCommon/04.png"),
          selected: require("../../assets/img/homeCommon/4.png"),
        },
        {
          show: false,
          text: "系统设置",
          link: "/systemSetPage",
          normal: require("../../assets/img/homeCommon/07.png"),
          selected: require("../../assets/img/homeCommon/7.png"),
        },
      ];
    } else {
      this.tabSelectLeft = [
        {
          show: true,
          text: "数据综合统计",
          link: "/HomePage",
          normal: require("@/assets/img/homeCommon/01.png"),
          selected: require("@/assets/img/homeCommon/1.png"),
        },
        {
          show: false,
          text: "材料质量管控",
          link: "/materialQualityPage",
          normal: require("@/assets/img/homeCommon/02.png"),
          selected: require("@/assets/img/homeCommon/2.png"),
        },
        {
          show: false,
          text: "场站生产质量",
          link: "/stationProductionPage",
          normal: require("../../assets/img/homeCommon/03.png"),
          selected: require("../../assets/img/homeCommon/3.png"),
        },
        {
          show: false,
          text: "实体质量管控",
          link: "/PhysicalQualityPage",
          normal: require("../../assets/img/homeCommon/05.png"),
          selected: require("../../assets/img/homeCommon/5.png"),
        },
        {
          show: false,
          text: "路面施工管控",
          link: "/RoadConstructionPage",
          normal: require("../../assets/img/homeCommon/06.png"),
          selected: require("../../assets/img/homeCommon/6.png"),
        },
        {
          show: false,
          text: "现场质量管控",
          link: "/siteQualityPage",
          normal: require("../../assets/img/homeCommon/04.png"),
          selected: require("../../assets/img/homeCommon/4.png"),
        },
      ];
    }
    // window.sessionStorage.setItem("yjSmart-theme", this.theme);
    this.theme = sessionStorage.getItem("yjSmart-theme");
    if (this.$route.path.includes("materiaMange")) {
      window.sessionStorage.setItem("yjSmart-router", this.$route.path);
      // window.sessionStorage.setItem("yjSmart-meun", this.$route.path);
    }
    if (this.$route.path.includes("/HomePage")) {
      this.activeId = "/HomePage"; // 当前活动路由
    } else if (this.$route.path.includes("/materialQualityPage")) {
      this.activeId = "/materialQualityPage"; // 当前活动路由
    } else if (this.$route.path.includes("/stationProductionPage")) {
      this.activeId = "/stationProductionPage"; // 当前活动路由
    } else if (this.$route.path.includes("/PhysicalQualityPage")) {
      this.activeId = "/PhysicalQualityPage"; // 当前活动路由
    } else if (this.$route.path.includes("/RoadConstructionPage")) {
      this.activeId = "/RoadConstructionPage"; // 当前活动路由
    } else if (this.$route.path.includes("/siteQualityPage")) {
      this.activeId = "/siteQualityPage"; // 当前活动路由
    }
  },
  methods: {
    // 左侧菜单是否显示
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 全局点击事件处理函数
    globalClick(event) {
      // // 判断点击是否发生在弹框外
      if (
        !this.$refs.dialogBox ||
        !this.$refs.dialogBox.contains(event.target)
      ) {
        // 如果是，则关闭弹框!this.$refs.dialogBox.contains(event.target)) {
        // 如果是，则关闭弹框
        this.isUser = false;
      }
    },
    // 是否全屏
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    // 是否显示用户详情
    userDetail() {
      this.isUser = !this.isUser;
    },
    setTheme() {
      //主题切换
      if (this.globalTheme == false) {
        //浅色模式
        this.theme = "theme-light";
      } else {
        //深色模式
        this.theme = "theme-dark";
      }
      window.sessionStorage.setItem("yjSmart-theme", this.theme);

      localStorage.setItem("global_theme", this.globalTheme); // 本地存储选择的 globalTheme
      bus.$emit("global_theme", this.globalTheme); // 将 globalTheme 的值传给父组件
      //  if (this.isDark) {
    },
    handleSelect(path) {
      // sessionStorage.removeItem("yjSmart-keyPath");
      // yjSmart-keyPath
      // 切换菜单栏
      this.$router.push({
        path: path,
      });
    },

    back() {
      this.$confirm("是否继续退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.sessionStorage.removeItem("yjSmart-token");
          this.$router.push("/");
        })
        .catch(() => {
          this.loading = false;
          this.$message.info("取消退出");
        });
    },
    handleChangeStyle() {
      // 切换主题
      this.globalTheme = !this.globalTheme;
      localStorage.setItem("global_theme", this.globalTheme); // 本地存储选择的 globalTheme
      bus.$emit("global_theme", this.globalTheme); // 将 globalTheme 的值传给父组件
    },
  },
};
</script>

<style scoped lang="less">
.homepage {
  width: 100%;
  height: 100%;
  font-size: 16px;
  .header {
    height: 0.5rem !important;
    width: 100%;

    color: #fff;
    background: #286ed2;
    padding: 0 16px 0 20px;
    display: flex;
    .h_title_logo {
      display: flex;
      align-items: center;
      width: 2.7rem;
      .logo {
        width: 0.26rem;
        height: 0.26rem;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        font-size: 0.18rem;
        margin-left: 0.13rem;
        line-height: 0.5rem;
      }
    }

    .menu {
      display: flex;
      flex: 1;
      font-size: 0.14rem;
      margin-top: 0.1rem;

      .cd {
        cursor: pointer;
        width: 1.5rem;
        height: 0.4rem;
        line-height: 0.4rem;
        border: none;
        display: flex;
        color: #fff;
        text-align: center;
        font-size: 0.14rem;
      }
      .linkImg {
        vertical-align: middle;

        margin-right: 0.08rem;
      }

      .active {
        background: #f0f2f5;
        position: relative;
        color: #286ed2;
        border-top-right-radius: 0.08rem;
        border-top-left-radius: 0.08rem;
      }
    }
    .userInfo {
      position: relative;
      margin-top: 0.1rem;
      display: flex;
      align-items: center;
      margin-left: 0.32rem;
      box-sizing: border-box;
      .iconsv {
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        line-height: 0px;
        overflow: hidden;
        margin-right: 0.04rem;
        background: #f0f2f5;

        .iconimg {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        height: 100%;
        line-height: 0.5rem;
        font-size: 0.12rem;
        color: #fff;
      }
    }
    .isUser {
      position: absolute;
      // width: 1.8rem;
      width: 1.3rem;
      height: 1.4rem;
      background: #fff;
      top: 0.5rem;
      border-radius: 0.05rem;
      // padding: 0.05rem;
      // height: 1.5rem;
      // background: #022189;
      border: 1px solid #2a90b7;
      z-index: 85;
      font-size: 0.12rem;
      .arrow {
        border-right: 0.1rem solid #286ed2;
        border-left: 0.1rem solid #286ed2;
        border-top: 0.05rem solid #286ed2;
        border-bottom: 0.1rem solid #fff;

        width: 0px;
        height: 0px;
        position: absolute;
        top: -0.15rem;
        right: 0.3rem;
        z-index: -1;
      }
    }
  }
  .aside {
    .toggle-button {
      display: block;
      // background-color: #286ed2;
      font-size: 17px;
      line-height: 30px;
      color: rgba(23, 26, 29, 1);

      text-align: center;
      letter-spacing: 0.2em;
      cursor: pointer;
      // margin-top: 0.05rem;
    }
  }

  .main_container {
    margin: 0.09rem 0.08rem 0.08rem 0.08rem;
    height: calc(100% - 15px);
    // height: 100%;
  }
}
.cd /deep/ a {
  width: 100% !important;
}

.active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -0.15rem;
  width: 0.15rem; /* 2倍的弧度半径 */
  height: 0.15rem; /* 2倍的弧度半径 */
  background: transparent;
  border-bottom-left-radius: 0.13rem;
  box-shadow: -0.04rem 0.04rem 0 0.04rem #f0f2f5;
}

// .isDark-switch {
//   .el-icon {
//     background-color: #fff !important;
//     padding: 2px;
//     border-radius: 50%;
//     color: #000;
//     margin-left: -8px;
//   }
// }

// .noDark-switch {
//   background-color: rgb(8, 8, 8) !important;

//   .el-icon {
//     color: #fff;
//     margin-left: 15px;
//   }
// }
// ::v-deep .el-switch {
//   border: 1px solid #1277ff;
//   // padding: 0.03rem;
//   overflow: hidden;
//   border-radius: 0.15rem;
//   height: 0.3rem;
// }
::v-deep .el-dialog {
  border-radius: 13px;
  min-width: 500px;
}

// ::v-deep .el-switch__core {
//   width: 1rem !important;
//   height: 24px;
//   border-radius: 100px;
//   border: none;
// }
// ::v-deep .el-switch__core::after {
//   width: 0.26rem;
//   height: 0.26rem;
//   top: -0.01rem;
//   background: linear-gradient(
//     270deg,
//     #1277ff 0%,
//     #137bff 19%,
//     #1987ff 38%,
//     #229bff 58%,
//     #2fb7ff 77%,
//     #3fdbff 96%,
//     #43e4ff 100%
//   );
// }
// ::v-deep .el-switch.is-checked .el-switch__core::after {
//   margin-left: -27px;
// }
/*关闭时文字位置设置*/
// ::v-deep .el-switch__label--right {
//   position: absolute;
//   z-index: 1;
//   right: 0.06rem;
//   margin-left: 0px;
//   color: rgba(255, 255, 255, 0.9019607843137255);
//   span {
//     font-size: 0.13rem;
//     box-sizing: border-box;
//     padding-right: 0.1rem;
//     color: #fff;
//   }
// }
/* 激活时另一个文字消失 */
// ::v-deep .el-switch__label.is-active {
//   display: none;
// }
/*开启时文字位置设置*/
// ::v-deep .el-switch__label--left {
//   position: absolute;
//   z-index: 1;
//   left: 0.05rem;
//   margin-right: 0px;
//   color: rgba(255, 255, 255, 0.9019607843137255);
//   span {
//     font-size: 0.12rem;
//     box-sizing: border-box;
//     padding-left: 0.1rem;
//     color: #fff;
//   }
// }
.head_text {
  display: flex;
  font-size: 0.14rem;
  margin-top: 0.1rem;
}

//     .theme {
// display: flex;
// justify-content: center;
// align-items: center;
// color: rgba(23, 26, 29, 0.6);
// }
.theme {
  display: flex;
  align-items: center;
  // justify-content: space-between;
}
.theme:nth-child(1) {
  margin-right: 0.05rem;
}
.personalCenter,
.goLogin,
.theme {
  color: rgba(23, 26, 29, 0.6);
  font-size: 0.14rem;
  height: 0.36rem;
  line-height: 0.36rem;
  padding-left: 0.16rem;
}
.personalCenter:hover,
.goLogin:hover,
.theme:hover {
  background: rgba(40, 110, 210, 0.12);
  color: rgba(40, 110, 210, 1);
}
</style>
